<template>
  <!--查看明细-->
	<div id="app">
      <loading v-if="loading"></loading>
      <div v-else class="evaluate">
          <div class="text">
              <p class="text-p">请对这位宝宝的本次服务进行评价吧.</p>
              <p class="text-p">您的反馈是宝宝最宝贵的建议!</p>
          </div>
          <div class="star">
              <img src="../../../assets/img/order-star.png" class="skill-star" v-for="(item,index) in starArray" @click="selectStar(index)" v-if="star>=item" :alt="index"/>
              <!--没选中-->
              <img src="../../../assets/img/order-star-no.png" class="skill-star" @click="selectStar(index)" v-else  :alt="index"/>
          </div>
          <div class="tag-list">
              <span :class="{'on':selected == index}" v-for="(item,index) in orderTag" v-text="item.title" @click="selecttext(index,item)"></span>
          </div>
          <!-- <div class="input-textar">
              <textarea class="text-area" contenteditable="true" name="eval-text" id="" cols="30" rows="10" v-model="textareaT" placeholder="我的更多想法..."></textarea>
          </div> -->
          <div class="fixed_btn center" @click="submitEvaluate">提交评价</div>
      </div>
	</div>
</template>
<script>
    import 'assets/css/common.css'
    import './index.css'
    import common from 'assets/js/common'
    import Loading from "components/loading.vue"
export default {
  data() {
    return {
        star:0,
        textareaT:'',
        loading:true,
        selected:0,
        orderId:'',
        orderTag:[],
        tags_id:'',
        starArray:[1,2,3,4,5]
    }
  }, 
  components:{Loading},
  //已成功挂载，相当ready()
  mounted(){
      this.orderId = common.getQueryString('orderId');
      this.selected = 0;
      this.star = 0;
      this.getTags();
  },
  //相关操作事件
  methods: {
      //选择星星
      selectStar:function(index){
         this.star = index+1;
      },  
      //选择标签
      selecttext:function(index,item){
          this.selected = index;
          this.tags_id = item.id;
      },
      getTags:function(){
          common.ajax({
              type:'GET',
              url:'api/adder/order/'+this.orderId+'/comment/tags'
          }).then(res=>{
             this.loading = false;
             this.orderTag = res.data;
             if(res.data.length>0){
                this.tags_id = res.data[0].id;
             }
           })
      },
      submitEvaluate(){
          if(this.star<=0){
              common.errMessage("请选择评价星数");
          }else{
              common.ajax({
                url:'api/adder/order/'+this.orderId+'/comment?tags_id='+this.tags_id+"&star="+this.star+"&content="+this.textareaT+"&is_anonymous=0"
              }).then(res=>{
                 common.errMessage(res.info);
              })
          }
          
      }
  }
}
</script>

